import React, {useState} from "react";

const Tabs=(props)=>{
    const [currentIndex,setcurrentIndex]=useState(0)
    //判断当前的index和返回的index是否相等，相等了就加上样式
    function titleClass(index){
        return index===currentIndex?"Tab_title active":"Tab_title"
    }
    function tabClickHandle(index){
        setcurrentIndex(index)
    }
  return (
      <div >

         <ul className="Tab_title_wrap">
             {
                 React.Children.map(props.children,(element,index)=>{
                   return <li key={index} className={ titleClass(index) } onClick={()=>tabClickHandle(index)}>{element.props.label}</li>
                 })
             }
         </ul>
          <div>
              {
                  React.Children.map(props.children,(element,index)=>{
                      return index===currentIndex?element.props.children:""
                  })
              }
          </div>
      </div>
  )
}
export default Tabs